<template>
  <div>
    <n-button v-if="!props.modelValue" @click="showSelectIcon">选择图标</n-button>
    <component
      class="cursor-pointer"
      font="size-22px"
      v-else
      @click="showSelectIcon"
      :is="icons[props.modelValue]"
    ></component>
  </div>
  <EvModal
    v-model="selectIconVisible"
    :config="{ options: { title: '选择图标', showFooter: false, width: '850px', height: '500px' }, events: {} }"
  >
    <div class="w-full p10 h-full bg-white flex flex-wrap justify-center overflow-auto">
      <div
        class="w-150px cursor-pointer justify-center items-center inline-block flex flex-col hover:bg-#ccc"
        font="size-40px"
        v-for="(iconItem, index) in icons"
        :key="index"
        :style="props.modelValue === iconItem.iconName ? 'background:#ccc' : ''"
        @click="selectIcon(iconItem.iconName)"
      >
        <component :is="iconItem"></component>
        <div font="size-12px">
          {{ iconItem.iconName }}
        </div>
      </div>
    </div>
  </EvModal>
</template>

<script setup>
import * as icons from '@/components/app-icons/index.js';
import { shallowRef } from 'vue';

Object.keys(icons).forEach((key) => {
  icons[key].iconName = key;
});
const selectIconVisible = shallowRef(false);
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});
// 自定义组件双向绑定
const emits = defineEmits(['update:modelValue']);

function showSelectIcon() {
  selectIconVisible.value = true;
}
function selectIcon(name) {
  emits('update:modelValue', name);
  selectIconVisible.value = false;
}
</script>
<style lang="scss"></style>
